<template>
  <div>
    <ul class="lists">
      <li class="child" v-for="(list, index) in lists" :key="index">
        <div class="hairlines-bottom info">
          <p class="date">
            <span>{{list.date}}</span>
            <span class="right">{{list.capital}}</span>
          </p>
          <p class="time">{{list.time}}</p>
        </div>
        <div class="explain">
          <p>
            <span>本金</span>
            <span class="right">￥{{list.money}}</span>
          </p>
          <p>
            <span>利息</span>
            <span class="right">￥{{list.interest}}</span>
          </p>
        </div>
      </li>
    </ul>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import img from './img/plan.png'
  import $ from 'edom'

  export default {
    name: 'repayPlan',
    data () {
      return {
        title: '还款记录',
        img: img,
        lists: null
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getList () {
        this.axios.post('/api/loanRepay/history', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          user_loan_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          let lists = data.desc.result
          let obj = {}
          let arr = []
          lists.forEach((item, index) => {
            obj = {}
            let time = item.pay_time.split(' ')
            obj['date'] = time[0]
            obj['time'] = time[1]
            obj['money'] = item.principal_cycle
            obj['capital'] = item.pay_money
            obj['interest'] = parseFloat(item.interest_normal) + parseFloat(item.interest_overdue)
            arr.push(obj)
          })
          this.lists = arr
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getList()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .lists{
    margin-bottom: rem(100);
    .child{
      background: #fff;
      margin-bottom: rem(15);
      padding: 0 rem(24);
      font-size: rem(28);
      color: #141414;
      .right{
        float: right;
      }
      .text-right{
        text-align: right;
        color: #666;
      }
      .info{
        padding: rem(35) 0 rem(25);
      }
      .date{
        font-weight: 700;
      }
      .time{
        margin-top: rem(5);
        font-size: rem(26);
        color: #999;
      }
      .explain{
        padding: rem(25) 0;
        font-size: rem(28);
        color: #999;
        p{
          margin-bottom: rem(20);
        }
      }
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(90);
  }
</style>
